<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生点名系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container-fluid">
        <header class="bg-primary text-white p-3 mb-4">
            <h1 class="text-center">学生点名系统</h1>
        </header>

        <div class="row">
            <!-- 侧边导航栏 -->
            <div class="col-md-3 mb-4">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active" id="nav-student">学生管理</a>
                    <a href="#" class="list-group-item list-group-item-action" id="nav-attendance">点名管理</a>
                    <a href="#" class="list-group-item list-group-item-action" id="nav-statistics">统计查询</a>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9">v
                <!-- 学生管理模块 -->
                <div id="student-module">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h3>学生信息管理</h3>
                        </div>
                        <div class="card-body">
                            <form id="student-form" class="mb-4">
                                <input type="hidden" id="edit-mode" value="add">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="student-id" class="form-label">学号</label>
                                        <input type="text" class="form-control" id="student-id" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="student-name" class="form-label">姓名</label>
                                        <input type="text" class="form-control" id="student-name" required>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <button type="submit" class="btn btn-primary" id="save-student">保存</button>
                                    <button type="button" class="btn btn-secondary" id="cancel-edit"
                                        style="display: none;">取消</button>
                                </div>
                            </form>

                            <div class="mb-3">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="search-student" placeholder="搜索学生...">
                                    <button class="btn btn-outline-secondary" type="button" id="btn-search">搜索</button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="student-list">
                                        <!-- 学生列表将通过JavaScript动态生成 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 点名管理模块 -->
                <div id="attendance-module" style="display: none;">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h3>点名管理</h3>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <button class="btn btn-primary" id="btn-attendance-all">全部点名</button>
                                <button class="btn btn-warning" id="btn-attendance-random">随机点名</button>
                            </div>

                            <div id="random-student-display" class="text-center p-4 mb-3 border rounded"
                                style="display: none;">
                                <h4>随机点名</h4>
                                <div id="random-student-info" class="p-3">
                                    <!-- 随机点名的学生信息将在这里显示 -->
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-sm btn-success me-2" id="btn-present">出勤</button>
                                    <button class="btn btn-sm btn-warning me-2" id="btn-late">迟到</button>
                                    <button class="btn btn-sm btn-danger me-2" id="btn-absent">旷课</button>
                                    <button class="btn btn-sm btn-info" id="btn-early-leave">早退</button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="attendance-list">
                                        <!-- 点名列表将通过JavaScript动态生成 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计查询模块 -->
                <div id="statistics-module" style="display: none;">
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h3>点名记录查询</h3>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="search-date" class="form-label">选择日期</label>
                                    <input type="date" class="form-control" id="search-date">
                                </div>
                                <div class="col-md-6 d-flex align-items-end">
                                    <button class="btn btn-primary" id="btn-search-attendance">查询</button>
                                </div>
                            </div>

                            <div class="table-responsive mb-4">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>日期</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="statistics-list">
                                        <!-- 统计数据将通过JavaScript动态生成 -->
                                    </tbody>
                                </table>
                            </div>

                            <!-- 统计信息卡片 -->
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h4>学生考勤统计</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover">
                                            <thead>
                                                <tr>
                                                    <th>学号</th>
                                                    <th>姓名</th>
                                                    <th>出勤次数</th>
                                                    <th>迟到次数</th>
                                                    <th>早退次数</th>
                                                    <th>旷课次数</th>
                                                    <th>出勤率</th>
                                                </tr>
                                            </thead>
                                            <tbody id="attendance-statistics">
                                                <!-- 统计数据将通过JavaScript动态生成 -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 应用脚本 -->
    <script src="js/student.js"></script>
    <script src="js/attendance.js"></script>
    <script src="js/app.js"></script>
</body>

</html>